<template>
  <div class="planCondition"> 
    <h2>履约计划及执行情况</h2>
    <div class="patient-info">
      <div class="item"><label>患者姓名：</label><span>{{resData.memberName}}</span></div>
      <div class="item"><label>性别：</label><span>{{['', '男', '女'][resData.memberGender]}}</span></div>
      <div class="item"><label>年龄：</label><span>{{resData.memberAge}}</span></div>
      <div class="item"><label>电话：</label><span>{{resData.memberTelephone}}</span></div>
    </div>
    <div class="table-part">
      <div class="table-item" v-for="item in resData.plans">
        <div class="table-title"><span>{{item.executePlanName}}</span><span class="date">制定时间：{{item.planExecuteTime}}</span></div>
        <Table :columns="columns" :data="item.details" />
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/api/commonApi";
export default {
  data() {
    return {
      resData: {},
      columns: [
        { title: '计划时间', key: 'planExecuteTime' },
        { title: '服务项目', key: 'itemsName' },
        { 
          title: '执行状态', key: 'executeStatus', render(h, params) {
            return h('span', {
              style:` color: ${['red', 'green'][params.row.executeStatus]}`
            }, ['未完成', '已完成'][params.row.executeStatus])
          }
        },
        { title: '实际执行时间', key: 'realExecuteTime' },
        { title: '执行医生', key: 'executeDoctorName' },
      ]
    }
  },
  mounted() {
    this.findKbafFdsOrderManagePlan();
    let id = this.$route.query.id
    console.log(id)
  },
  methods: {
    findKbafFdsOrderManagePlan() {
      this.$axios
        .get(api.findPerformancePlanExecute, {contractId: this.$route.query.contractId})
        .then(res => {
          if (res.data.code === 1) {
            this.resData = this.deepClone(res.data.object);
          } else {
            this.$Message.error(res.data.message || "请求异常");
          }
        })
    },
    deepClone(obj) {
      return JSON.parse(JSON.stringify(obj));
    }
  }
}
</script>

<style scoped lang="less">
  .planCondition {
    padding: 0 20px;
    > h2 {
      text-align: center;
      font-weight: bolder;
    }
    .patient-info {
      display: flex;
      .item {
        padding-right: 40px
      }
    }
    .table-part {
      .table-item {
        padding-top: 20px;
        .table-title {
          width: 30%;
          display: flex;
          justify-content: space-between;
          padding-bottom: 10px;
          .date {
            padding-left: 40px;
          }
        }
      }
    }
  }
</style>